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Кто я? 


- Верстала ешё на таблицах 


— jQuery, VanillaJS, AngularJS, React, Angular и Vue.js 


И Node.js 
— Счастнивая-безрабетная 
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В браузере есть только... 


Браузерные АР! 
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» Broadcast Channel АР! 


» CSS Counter Styles » Frame Timing АР! 
e CSS Font Loading API Д • Fullscreen АР! 

• CSS Painting АР! „ Gamepad API А 
• CSS Typed Object Model АР! 5 | ion 
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* HTML Drag and Drop АР! 


High Resolution Time 


» Canvas API 

» Channel Messaging АР! 
* Clipboard API 

* Console API 

* Contact Picker API 

* Content Index API 


History API 


Image Capture API 
• IndexedDB 


» Intersection Observer АР! 
• Long Tasks АР! А 

• Media Capabilities АР! Д 
» Media Capture and Streams 


Presentation АР! Д 
Proximity Events @ А 


Push АРІ Д 


Resize Observer АР! 
Resource Timing АР! 


Screen Capture АР! 
Screen Wake Lock АР! 
Sensor АР! 

erver Sent Events 
Service Workers АР! 
Storage 
Storage Access АР! 


Streams Å 


• Web Animations 

• Web Audio АР! 

. W hentication 
• Web Сгуріо АР! 


• WebHID АР! 

• WebRTC 

• WebVRAPI @ Д 
• Ууерутт 

• WebXR Device АР! 
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• XMLHttpRequest 
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Visual vs. Layout Viewport Demo 


Use the viewport on the right to scroll and zoom around. The viewport on the left displays how the browser sees the two viewports. Note how the position: fixed navbar at the top behaves under pinch-zoom 
between implementations. Disclaimer: This is the result of my research and а crude demo, the behavior for implementations (particularily non-Chrome) may not capture all their subtleties. 


What the browser sees What the user sees 
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Page Scale 
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Browser 
Implementation 


(€ Chrome 
O Edge 

O Firefox 
O Safari 


Visual Viewport 
Layout Viewport 


Use mouse to pan around (as if using а touch-screen). Hold shift to pinch-zoom in/out. 


Chrome 


The layout viewport is unchanged under pinch-zoom - the position: fixed bar 
does not follow the visual viewport when zoomed in. 


ө ө А 
VisualViewport АР! 


VisualViewport = { 


// Read-only // Как получить значение зума* 
offsetLeft const scale = VisualViewport.scale 
offsetTop 

pageLeft 

pageTop 

width 

height 


scale 


"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor 
incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis 
nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. 
Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu 
fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa 
qui officia deserunt mollit anim id est laborum." "Lorem ipsum dolor sit amet, 
consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore 
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco 
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in 
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. 
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt 
mollit anim id est laborum." "Lorem ipsum dolor sit amet, consectetur adipiscing 
elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim 
ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea 
commodo consequat. Duis аще irure dolor іп reprehenderit in voluptate velit esse 
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 


Disappears when the page is zoomed in 
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Caniuse — VisualViewport АР! 


Манипуляции DOM и стилями 


ром Intersection Observer АР! 
CSS Counter Styles Page Visibility API 

CSS Font Loading API Pointer events 

CSS Painting API Pointer Lock АР! 

CSS Typed OM Resize Observer АР! 
CSSOM Touch events 


HTML Drag and Drop API Visual Viewport API 


Манипуляции DOM и стилями 


Intersection Observer АР! 


CSS Counter Styles Page Visibility API 


CSS Painting API 
CSS Typed OM 


HTML Drag and Drop АР! 


Манипуляции DOM и стилями 


Intersection Observer АР! 


CSS Counter Styles Page Visibility API 


CSS Painting API 
CSS Typed OM 


HTML Drag and Drop АР! 


Манипуляции DOM и стилями 


Intersection Observer АР! 


CSS Counter Styles Page Visibility API 


HTML Drag and Drop API 


Манипуляции DOM и стилями 


Intersection Observer АР! 


CSS Counter Styles Page Visibility API 


CSS Painting АР! 
CSS Typed OM 


Манипуляции РОМ и стилями 
Intersection Observer АРГ 
Page Visibility API 


CSS Counter Styles 


CSS Painting API 
CSS Typed OM 


HTML Drag and Drop API 
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Broadcast Channel АР! 


Web APIs More APIs 


Web APIs More APIs 


Demo - BroadcastChannel Demo - BroadcastChannel 
Open this page in another tab, window or iframe Open this page in another tab, window or iframe 
to chat with them. to chat with them. 


Type your message Send Type your message Send 


Demo - BroadcastChannel 


Broadcast Channel АР! 


const bc = new BroadcastChannel('test channel!) 
bc.postMessage('This is a test message.') 
bc.onmessage - function (ev) ( ... ) 


bc.close(); 


BroadcastChannel B-s 


BroadcastChannel allows scripts from the same origin but other 
browsing contexts (windows, workers) to send each other 
messages. 
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Передача данных и состояние сети 


Background Fetch API Service Worker АР! 

Beacon АР! Server-sent events 

Broadcast Channel АР! Streams АР! 

Content Index API Web Periodic Background Synchronization API 
Channel Messaging API URL API 

Fetch API WebSockets 

History АР! XMLHttpRequest 


Network Information API 
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Передача данных и состояние сети 


Веасоп АР! Server-sent events 


Streams АР! 


Channel Messaging АР! 


Network Information API 
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Передача данных и состояние сети 


Streams АР! 


Channel Messaging АР! 


Network Information API 
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Передача данных и состояние сети 


Веасоп АР! Server-sent events 


Streams АР! 


Network Information API 
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Передача данных и состояние сети 


Веасоп АР! Server-sent events 


Streams АР! 


Channel Messaging АР! 


А 


Передача данных и состояние сети 


Веасоп АР! Server-sent events 


Channel Messaging АР! 


Network Information API 
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Barcode Detection АР! 


const barcodeDetector = new BarcodeDetector(); 


barcodeDetector.detect(image) 
.then(barcodes => 4 ... |) 


.catch(e => ( ... >); 
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Caniuse — BarcodeDetector АР! 


Графика и медиа 
Вагсоде Detection АРГ Presentation АР! 


Сапуа5 АР! Screen Capture АР! 

Encrypted Media Extensions API Screen Wake Lock АР! 
Fullscreen API Web Animations АР! 

Media Capabilities АР! Web Audio АР! 

Media Session АР! WebGL 

Media Source АР! WebRTC АР! 

Media Stream Web Speech API 

MediaStream Recording API Web Video Text Tracks Format 
MediaStream Image Capture АР! WebVR-API+ WebXR Device АР! 


Picture-in-Picture АР! 


Графика и медиа 


Presentation АР! 


Screen Wake Lock АР! 


Fullscreen АР! 


Media Session API WebGL 


WebVR-API+ WebXR Device АР! 
Picture-in-Picture АР! 


Графика и медиа 


Presentation АР! 


Screen Wake Lock АР! 


Media Session API WebGL 


WebVR-API+ WebXR Device АР! 
Picture-in-Picture АР! 


Графика и медиа 


Presentation АР! 


Screen Wake Lock АР! 


Fullscreen АР! 


Media Session APL WebGL 


WebVR-API+ WebXR Device АР! 
Picture-in-Picture API 


Графика и медиа 


Presentation АР! 


Screen Wake Lock АР! 


Fullscreen АР! 


Media Session API WebGL 


WebVR-AP+ WebXR Device API 


Графика и медиа 
Presentation АРГ 


Screen Wake Lock АР! 
Fullscreen АР! 


Media Session API WebGL 


WebVR-API+ WebXR Device АР! 
Picture-in-Picture АР! 


Графика и медиа 


Presentation АР! 


Fullscreen АР! 


Media Session АР! WebGL 


WebVR-API+ WebXR Device АР! 
Picture-in-Picture АР! 


Графика и медиа 


Presentation АР! 


Screen Wake Lock АР! 


Fullscreen АР! 


Media Session API WebGL 


WebYR-AP} WebXR Device API 


Picture-in-Picture API 
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Vibration АР! 


if ("vibrate" in navigator) 4 


navigator.vibrate(200) // одиночная вибрация 


navigator.vibrate([100,30,100,30,...]) // последовательность 
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Caniuse — Vibration АР! 


Управление устройствами 


Clipboard АР! Battery StattsAPt Preximity-Events 
Gamepad API Sensor APIs 

Geolocation API Vibration АРГ 

Notifications API Web Bluetooth API 

Permissions API WebHID API 


Push API Web MIDI API 


Управление устройствами 


Clipboard АР! 
Gamepad АР! Sensor АР15 


WebHID АР! 
Push АР! 


Управление устройствами 
Clipboard API 


Gamepad АР! Sensor АР15 


WebHID АР! 
Push АР! 


Управление устройствами 


Clipboard АР! 


Gamepad АР! Sensor АР!5 


WebHID АР! 
Push АР! 


Управление устройствами 


Clipboard АР! 
Gamepad АР! Sensor АР15 


WebHID АР! 


Управление устройствами 


Clipboard АР! 


Gamepad АР! Sensor APIs. 
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Push АР! 


Управление устройствами 
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sanitize-html 


2.4.0 * Public * Published 3 months ago 
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3 Weekly Downloads 
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Contact РїсКег АР! Demo 


Access to the user's contacts has been а feature of 
native apps since (almost) the dawn of time. The 
Contact Picker API is a new, on-demand picker that 
allows users to select an entry or entries from their 
contact list and share limited details of the selected 
contact(s) with a website. It allows users to share only 
what they want, when they want, and makes it easier for 
users to reach and connect with their friends and 
family. 


Multiple results? 

7 Include name? 

М Include email addresses? 

М Include telephone numbers? 


This demo does not share or upload your contacts. It 
simply shows them on screen, and no contact data is 
transferred off this device. 


Open contact picker 


Results 


See A Contact Picker for the Web for complete details 
on the API, including use cases, how it was designed, 
and how to use it. 


Check out the source for this sample, or remix it on 
Glitch. 


act Picker АР! Demo 
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Contact Picker АР! 


const supported = ('contacts' in navigator 


&& 'ContactsManager' in window); 
const props = ['name', 'email', 'tel', 'address', 'icon']; 
const opts = ( multiple: true ); 
navigator.contacts.select(props, opts) 


.then(contacts => ( ... }) 


.catch(e => { ... |) 


ContactsManager АР! в 


(оче Usage relative Date relative All $ 


* 
Chrome Edge Safari Firefox Opera 


104 


ааа = 
er Коу | = о 
о | оо | м W 


А 


Usage % of allusers > ша 
Global 43.81% 
UC 
Chrome ка: , Browser 
бог Safari оп” Samsung Opera Mini for 


Android 105 Internet Android 


ma — 


15.3 
15.6 


16.1 


Caniuse — ContactsManager АР! 


Хранение и управление данными 


Background Tasks АР! 
Console API 


Credential Management АР! 


Encoding АР! 


File and Directory Entries АР! 


File System Access АР! 


Frame Timing АР! 
IndexedDB АР! 


Long Tasks АР! 


Navigation Timing API 
Performance АР! 


Performance Timeline 


Resource Timing API 
Payment Request АР! 
Storage Access АР! 
Storage АР! 

Web Authentication АР! 
Web Crypto API 


Web Storage АР! 
Web Workers АР! 


Хранение и управление данными 


Performance АР! 


Credential Management АР! 
Payment Request АРІ 


IndexedDB АР! 


Хранение и управление данными 


Performance АР! 


Payment Request АР! 


IndexedDB АР! 


Хранение и управление данными 


Performance АР! 


Credential Management АР! 
Payment Request АР! 


Хранение и управление данными 
Performance АРГ 
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Payment Request АР! 
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Хранение и управление данными 


Performance АР! 


Credential Management АР! 


IndexedDB АР! 


Вместо выводов 


— Нельзя поверить в невозможное! 


— Просто у тебя мало опыта, - заметила Королева. - В твоем 
возрасте я уделяла этому полчаса каждый день! В иные дни я успевала 


поверить в десяток невозможностей до завтрака! 


Льюис Кэрролл, «Алиса в стране чудес» 
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bit.ly/FC2022-WebAPIs 
Саша Шинкевич (@neesoglasnaja) 


